<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css" />
    <style type="text/css">
        /* .leaflet-container{background-color:#c5e8ff;} */
    </style>
 
</head>
<body>
    <div id="map" style="width: 1000px; height: 800px"></div>
    <script src="../js/jquery-1.10.2.js"></script>
    <script src="../leaflet/leaflet.js"></script>
    <script>
        // 加载json数据可以构建区域框线但是无法描述地图线路等细节
        var myGeoJSONPath = '../geoJson/武汉市.geojson';
        var myCustomStyle = {
            stroke: false,
            fill: true,
            fillColor: '#0080ff',
            fillOpacity: 0.2,
            color:"#000",
            weight: 2
        }
        $.getJSON(myGeoJSONPath,function(data){
            // console.log('json',data)
            var map = L.map('map').setView([30.594236,114.121774], 12);

            L.geoJson(data, {
                clickable: false,
                pmIgnore: true,
                style: function(data){
                    // console.log(data)
                },
                onEachFeature: function(feature,layer){
                    
                    L.marker(layer.getBounds().getCenter(),{
                        icon:L.divIcon({
                            html: `<label style="color:red">${feature.properties.name}</label>`,
                            iconSize: 50,
                            className: 'my-title'
                        })
                    }).addTo(map)
                }
            }).addTo(map);
        })
        const obj = {
            a:1,
            b:2,
            c:3,
            d:4
        }
        for(let key in obj){
            console.log(key)
        }
        // 需要是可以迭代的对象
        for(let value of obj){
            console.log(value)
        }
    </script>
</body>
</html>